<template>
  <view class="container">
    <view class="header" :style="{ height: headerheight + 'px', paddingTop: paddingtop + 'px' }">
      <uni-icons type="left" size="20" style="margin-left: 24rpx; margin-right: 240rpx" @click="goback"></uni-icons>
      <view>司机招募</view>
    </view>
    <view class="txt1">代驾司机</view>
    <view class="txt2">招募啦</view>
    <view class="txt">加入我们一同前行</view>
    <image src="../../static/mine/driverimg.png" class="driverimg" mode=""></image>
    <!-- 手机号验证 -->
    <view class="box">
      <view class="phone">
        <image src="../../static/order/phonenumber.png" style="width: 28rpx; height: 32rpx" mode=""></image>
        <input type="number" placeholder="请输入您的手机号" class="ipt" v-model="mobile" />
      </view>
      <view class="code">
        <image src="../../static/mine/code.png" style="width: 32rpx; height: 32rpx; margin-right: 18rpx" mode=""></image>
        <input type="number" class="ipt2" placeholder="请输入短信验证码" v-model="captcha" />
        <view class="getcode" @click="getcodefn">{{ codeswich ? time + '秒后重新获取' : '获取验证码' }}</view>
      </view>
      <!-- 下一步按钮 -->
      <view class="nextbtn" @click="gonext">下一步</view>
      <!-- 协议 -->
      <view style="font-weight: 500; font-size: 26rpx; padding-left: 50rpx">
        <checkbox :checked="agree" @click="agree = !agree" color="#7C8086" style="transform: scale(0.7)" />
        <text>阅读并同意</text>
        <text style="color: #5094f7" @click="goxieyi">《服务协议》</text>
      </view>
      <!-- 报名须知 -->
      <view style="margin-top: 68rpx">
        <view style="font-weight: bold; font-size: 30rpx; color: #222222; margin-bottom: 18rpx">报名须知</view>
        <rich-text :nodes="content"></rich-text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mobile: '', // 手机号
      captcha: '', // 验证码
      headerheight: '', // 头部的盒子高度
      paddingtop: '', // 内边距的高度
      time: 60, // 验证码倒计时
      codeswich: false, // 验证码开关
      timer: null, // 定时器
      agree: false, //协议
      content: '报名须知报名须知报名须知报名须知报名须知报名须知报名须知报名须知报名须知报名须知报名须知报名须知报名须知报名须知报名须知报名须知'
    };
  },
  methods: {
    //下一步
    gonext() {
      if (!/^1[3-9][0-9]{9}$/.test(this.mobile)) {
        return uni.showToast({
          title: '输入的手机号不正确',
          icon: 'none'
        });
      }
      if (this.captcha == '') {
        return uni.showToast({
          title: '验证码不能为空',
          icon: 'none'
        });
      }
      if (!this.agree) {
        return uni.showToast({
          title: '请选阅读用户协议',
          icon: 'none'
        });
      }
      this.http('/driver/mobilelogin', {
        mobile: this.mobile,
        captcha: this.captcha
      }).then((res2) => {
        console.log(res2);
        if (res2.code == 1) {
          //在这里获取个人信息判断认证的状态
          this.http('/driver/mydriver', {
            driver_id: res2.data.driver_id
          }).then((res) => {
            console.log('个人信息', res);
            if (res.data.auditing == 1) {
              uni.redirectTo({
                url: '/mine/rzapplying/rzapplying?driverid=' + res2.data.driver_id
              });
            } else if (res.data.auditing == 2) {
              uni.redirectTo({
                url: '/mine/applyingstatus/applyingstatus?type=' + 2 + '&driverid=' + res2.data.driver_id
              });
            } else if (res.data.auditing == 3) {
              uni.redirectTo({
                url: '/mine/applyingstatus/applyingstatus?type=' + 3 + '&driverid=' + res2.data.driver_id
              });
            } else {
              uni.redirectTo({
                url: '/mine/sjrz/sjrz'
              });
            }
          });
        }
      });
    },
    goback() {
      uni.navigateBack();
    },
    // 发送验证码
    getcodefn() {
      if (!/^1[3-9][0-9]{9}$/.test(this.mobile)) {
        return uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
      }
      if (!this.agree) {
        return uni.showToast({
          title: '请先阅读用户协议',
          icon: 'none'
        });
      }
      if (!this.codeswich) {
        this.codeswich = true;
        this.time--;
        this.timer = setInterval(() => {
          this.time--;
          if (this.time == 0) {
            this.time = 60;
            this.codeswich = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
      this.http('/sms/send', { mobile: this.mobile, event: 'login' }).then((res) => {
        console.log('验证码', res);
      });
    },
    //跳转到服务协议
    goxieyi() {
      uni.navigateTo({
        url: '/mine/requiredriverxieyi/requiredriverxieyi'
      });
    }
  },
  onLoad() {
    const app = getApp();
    console.log(app);
    this.paddingtop = app.globalData.capsule.top;
    this.headerheight = (app.globalData.capsule.top - app.globalData.system.statusBarHeight) * 2 + app.globalData.capsule.height + app.globalData.system.statusBarHeight;
    console.log(this.paddingtop, this.headerheight);
  },
  onShow() {},
  onHide() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  background: linear-gradient(137deg, #fbdc91 0%, #eef1fe 51%, #9fc2fa 100%);
  .header {
    box-sizing: border-box;
    display: flex;
  }
  .txt {
    position: relative;
    top: 90rpx;
    left: 44rpx;
    box-sizing: border-box;
    width: 310rpx;
    height: 62rpx;
    background: #000000;
    text-align: center;
    line-height: 62rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #ffffff;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
  }
  .txt1 {
    position: relative;
    left: 44rpx;
    top: 72rpx;
    box-sizing: border-box;
    width: 376rpx;
    height: 94rpx;
    font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
    font-weight: bold;
    font-size: 94rpx;
    color: #222222;
    line-height: 48rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .txt2 {
    position: relative;
    left: 44rpx;
    top: 90rpx;
    box-sizing: border-box;
    width: 276rpx;
    height: 92rpx;
    font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
    font-weight: bold;
    font-size: 92rpx;
    color: #222222;
    line-height: 46rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .driverimg {
    position: fixed;
    top: 130rpx;
    right: -35rpx;
    width: 430rpx;
    height: 516rpx;
  }
  .box {
    position: relative;
    top: 96rpx;
    left: 0;
    box-sizing: border-box;
    margin: 0 24rpx;
    margin-top: 96rpx;
    width: 702rpx;
    height: 952rpx;
    background: linear-gradient(180deg, #eff5ff 0%, rgba(230, 241, 255, 0.37) 100%);
    border-radius: 30rpx 30rpx 30rpx 30rpx;
    padding: 68rpx 40rpx;
    .phone {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      width: 622rpx;
      height: 100rpx;
      background: #ffffff;
      border-radius: 56rpx 56rpx 56rpx 56rpx;
      padding: 34rpx;
      .ipt {
        flex: 1;
        font-weight: 500;
        font-size: 30rpx;
        padding-left: 16rpx;
        color: #666666;
      }
    }
    .code {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      width: 622rpx;
      height: 100rpx;
      background: #ffffff;
      border-radius: 56rpx 56rpx 56rpx 56rpx;
      padding: 34rpx;
      margin-top: 20rpx;
      .ipt2 {
        flex: 1;
      }
      .getcode {
        box-sizing: border-box;
        font-weight: 500;
        font-size: 28rpx;
        color: #3483f6;
      }
    }
    .nextbtn {
      box-sizing: border-box;
      width: 622rpx;
      height: 100rpx;
      text-align: center;
      line-height: 100rpx;
      background: #3483f6;
      border-radius: 56rpx 56rpx 56rpx 56rpx;
      font-weight: 500;
      font-size: 30rpx;
      color: #ffffff;
      margin-top: 26rpx;
      margin-bottom: 16rpx;
    }
  }
}
</style>
